<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>login</title>
    <meta http-equiv="Content-Type" charset="UTF-8">
    <link rel="stylesheet" href="../../static/css/font.css">
    <link rel="stylesheet" href="../../static/css/xadmin.css">
    <link rel="stylesheet" href="../../static/css/snow.css">
    <link rel="stylesheet" href="../../static/css/style.css">
    <link rel="stylesheet" href="../../static/css/font-awesome.min.css">
    <script src="../../static/js/jquery.min.js" type="text/javascript"></script>
    <script src="../../static/lib/layui/layui.js" type="text/javascript"></script>
    <script src="../../static/js/xadmin.js" type="text/javascript"></script>
</head>
<body>
<div class="snow-container">
    <div class="snow foreground"></div>
    <div class="snow foreground layered"></div>
    <div class="snow middleground"></div>
    <div class="snow middleground layered"></div>
    <div class="snow background"></div>
    <div class="snow background layered"></div>
</div>

<div class="top-buttons-agileinfo">
	<a href="/login" >登录</a><a href="/register" class="active" >注册</a>
</div>
<h1>学海无涯线上图书馆</h1>
<div class="main-agileits" id="registerApp">
    <!--form-stars-here-->
    <div class="form-w3-agile">
        <h2 class="sub-agileits-w3layouts">注册</h2>
        <form action="#" method="post">
            <input type="text" id="userName" name="username" placeholder="账号" required="" onmouseover="mouseover()"/>
            <input type="password" id="pwd" name="password" placeholder="密码" required="" onmouseover="mouseover()"/>
            <div>
                <input type="password" id="againpwd" name="password" placeholder="在输一次密码" required="" onmouseover="mouseover()">
                <a style="display: none;" id="error">两次密码不同</a>
            </div>
            <button id="button1" disabled=true type="button" class="layui-btn layui-btn-lg layui-btn-normal" onclick="register()">注册</button>
        </form>
    </div>
</div>
<!--//form-ends-here-->
<!-- copyright -->
<div class="copyright w3-agile">
    <p> © 2017 Internship Sign In & Sign Up Form . All rights reserved | Design by <a
            href="https://shop585798004.taobao.com/" target="_blank">前端ui</a></p>
</div>
<script>

</script>
</body>
<script>
    function mouseover() {
        var pwd = $("#pwd").val().trim();
        var againpwd = $("#againpwd").val().trim();
        if (pwd.length > 0 && againpwd.length > 0){
            if (pwd != againpwd){
                $("#error").attr({style:"display:block"});
                $("#error").attr({style:"color:red"});
                $("#button1").attr("disabled",true);
            }else {
                $("#error").attr({style:"display:none"});
                $("#button1").attr("disabled",false);
            }
        }else {
            $("#error").attr({style:"display:none"});
            $("#button1").attr("disabled",false);
        }
    }

    function register() {
        var username = $("#userName").val();
        var password = $("#pwd").val();
        $.ajax({
            url:"/user/insertUser",
            type:"post",
            data:{username:username,password:password},
            success:function (data) {
                if (data.code == 200){
                    layer.alert(data.msg,{icon:6},function () {
                        location.href = "/login"
                    })
                }else {
                    layer.alert(data.msg,{icon:5},function () {})
                }
            },
            error:function () {
                alert("服务器异常！")
            }
        })
    }

</script>
</html>